<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rain</title>
    <style type="text/css">
      *{
            margin:0;
            padding: 0;
        }
        canvas{
            display: block;
            background: #000;
            margin: auto;
        }
    </style>
</head>
<body>
<canvas id="canvas" >您的浏览器不支持canvas绘图标签，请您跟换浏览器</canvas>
<script type="text/javascript">
    var can=document.getElementById("canvas");
    //设置绘图的环境
    var ctx=can.getContext("2d");

    //获取浏览器窗口的宽高
    var w=can.width=window.innerWidth;
    var h=can.height=window.innerHeight;
    window.onresize=function(){
         w=can.width=window.innerWidth;
         h=can.height=window.innerHeight;
    };

 /*   //绘制矩形 坐标 宽高
    //设置颜色
    ctx.fillStyle="red";
    ctx.fillRect(100,100,150,150);

    //绘制圆形 逆时针为false
    ctx.arc(400,400,50,0,Math.PI*2,false);
    ctx.fill();
    ctx.strokeStyle="#fff";
    ctx.stroke();
*/


    //canvas动画原理
   /* var y=0;
    setInterval(function(){
        ctx.clearRect(0,0,w,h);
        ctx.fillStyle="red";
        y++;
        ctx.fillRect(100,y,150,150);

    },30)*/

    //js编程思维 面向过程 面向对象
    //创建雨滴类
    function Drop(){}
        //给雨滴类添加原型方法
        Drop.prototype={
            init:function(){//初始化雨滴对象
                this.x=random(0,w)//随机坐标
                this.y=0;
                this.vy=random(4,5);//雨滴下落的速度
                this.maxh=random(0.8*h,0.9*h)
                this.r=1;
                this.vr=1;
                this.a=1;
                this.va=0.96;
            },
            draw:function(){
                if(this.y>this.maxh){
                    ctx.beginPath()
                    ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false);
                    ctx.strokeStyle="rgba(0,255,255,"+this.a+")";
                    ctx.stroke();
                }else{
                    ctx.fillStyle="#0ff";
                    ctx.fillRect(this.x,this.y,2,10);
                }

                this.update();
            },
            update:function(){
                if(this.y<this.maxh){
                    this.y+=this.vy;
                }else {
                    if(this.a>0.03){
                        this.r+=this.vr;
                        if(this.r>50){
                            this.a*=this.va;
                        }
                    }else {
                        this.init();
                    }

                }

            }
        };
   /* var drop=new Drop();
    drop.init();
    drop.draw();*/
    var drops=[];
    // 实例化30个雨滴对象
    for(var i=0;i<30;i++){
        (function (j){
            setTimeout(function(){
                var drop=new Drop();
                drop.init();
                drops.push(drop);
                console.log(j);
            },j*200)
        })(i)

      ;
    }
    // 绘制出30个雨滴对象
    function move(){
        ctx.fillStyle="rgba(0,0,0,0.1)"
        ctx.fillRect(0,0,w,h)
        for(var i=0;i<drops.length;i++){
            drops[i].draw();
        }
    }
    setInterval(move,100)
        //生成随机数
    function random(min,max){
        return Math.random()*(max-min)+min;//min~max;
    }

</script>
</body>
</html>